<template>
  <Dialog
    :model-value="dialogVisible"
    :title="dialogProps.title"
    :fullscreen="dialogProps.fullscreen"
    :max-height="dialogProps.maxHeight"
    :cancel-dialog="cancelDialog"
    width="70%"
    top="8vh"
  >
    <ProductManage :is-show-header="false" ref="productManageRef" :show-selection="true" :selection-limit="dialogProps.selectionLimit" />
    <template #footer>
      <slot name="footer">
        <el-button @click="cancelDialog">取消</el-button>
        <el-button type="primary" @click="getProductData()">确定</el-button>
      </slot>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { nextTick, ref } from 'vue'
import { Dialog } from '@/components/Dialog'
import ProductManage from '@/views/Product/ProductManage.vue'
import { ElMessage } from 'element-plus'

interface DialogProps {
  title: string
  isView: boolean
  fullscreen?: boolean
  row: any
  labelWidth?: number
  maxHeight?: number | string
  api?: (params: any) => Promise<any>
  getTableList?: () => Promise<any>
  selectionLimit?: number
}

const productManageRef = ref()

const dialogVisible = ref(false)
const dialogProps = ref<DialogProps>({
  isView: false,
  title: '',
  row: {},
  labelWidth: 160,
  fullscreen: false,
  maxHeight: '500px',
  selectionLimit: 1
})

// 接收父组件传过来的参数
const acceptParams = (params: DialogProps): void => {
  params.row = { ...dialogProps.value.row, ...params.row }
  dialogProps.value = { ...dialogProps.value, ...params }
  dialogVisible.value = true
  // 确保组件加载完成
  nextTick(() => {
    if (productManageRef.value && productManageRef.value.proTable) {
      console.log('ProductDialog 初始化完成，selectionLimit:', dialogProps.value.selectionLimit)
    }
  })
}

defineExpose({
  acceptParams
})

const cancelDialog = () => {
  dialogVisible.value = false
}

const emit = defineEmits(['getProductData'])

const getProductData = () => {
  if (!productManageRef.value || !productManageRef.value.proTable) {
    ElMessage.warning({ message: '商品列表未加载完成，请稍后再试' })
    return
  }

  const selectedList = productManageRef.value.proTable.selectedList
  const selectedListIds = productManageRef.value.proTable.selectedListIds

  console.log('选中的商品列表:', selectedList)
  console.log('选中的商品ID列表:', selectedListIds)

  if (!selectedList || selectedList.length === 0) {
    ElMessage.warning({ message: '请选择商品！' })
    return
  }

  // 根据 selectionLimit 判断是单选还是多选
  if (dialogProps.value.selectionLimit === 1 && selectedList.length > 1) {
    ElMessage.warning({ message: '只能选择一个商品！' })
    return
  }

  if (dialogProps.value.selectionLimit === 1) {
    // 单选模式 - 返回单个商品对象
    const product = selectedList[0]
    const productData = {
      id: product.id,
      name: product.name,
      price: product.price,
      stock: product.stock,
      sales: product.sales || 0
    }
    console.log('传递单个商品数据:', productData)
    emit('getProductData', productData)
  } else {
    // 多选模式 - 返回商品数组
    const products = selectedList.map((product: any) => ({
      id: product.id,
      name: product.name,
      price: product.price,
      stock: product.stock,
      sales: product.sales || 0
    }))
    console.log('传递多个商品数据:', products)
    emit('getProductData', products)
  }

  dialogVisible.value = false

  // if (productManageRef.value.proTable.selectedList.length > 1) {
  //   ElMessage.warning({ message: '只能选择一个商品！' })
  // } else if (productManageRef.value.proTable.selectedList.length === 1) {
  //   const param = {
  //     id: productManageRef.value.proTable.selectedListIds[0],
  //     name: productManageRef.value.proTable.selectedList[0].name,
  //     price: productManageRef.value.proTable.selectedList[0].price,
  //     stock: productManageRef.value.proTable.selectedList[0].stock
  //   }
  //   emit('getProductData', param)
  //   dialogVisible.value = false
  // }
}
</script>
